<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :border="false">
      <p class="title">短视频插件设置</p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
        <a-form-model-item label="作者审核" prop="is_author_audit">
          <a-radio-group v-model="form.is_author_audit" defaultValue="0">
            <a-radio value="1"> 开启 </a-radio>
            <a-radio value="0"> 关闭 </a-radio>
          </a-radio-group>
          <span class="tip">开启审核后，通过审核后才能发布作品</span>
          <a-checkbox-group v-model="form.verify" v-if="form.is_author_audit === '1'">
            <a-checkbox value="name">姓名</a-checkbox>
            <a-checkbox value="tel">手机号</a-checkbox>
            <a-checkbox value="id">身份证</a-checkbox>
            <a-checkbox value="reason">申请理由</a-checkbox>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="作品审核" prop="is_video_audit">
          <a-radio-group v-model="form.is_video_audit" defaultValue="0">
            <a-radio value="1"> 开启 </a-radio>
            <a-radio value="0"> 关闭 </a-radio>
          </a-radio-group>
          <span class="tip">开启审核后，发布作品通过审核后才能显示</span>
        </a-form-model-item>
        <a-form-model-item label="分佣比例" prop="profit">
          <a-input-number
            v-model="form.profit"
            :min="0"
            :max="100"
            :formatter="(value) => `${value}%`"
            :parser="(value) => value.replace('%', '')"
          />
        </a-form-model-item>
        <a-form-model-item label="345视频解析key">
          <a-input v-model="form.video_analyze_345" placeholder="请输入key" />
          <div class="tip">
            用于视频发布,解析三方链接获取视频数据
            <a href="https://www.345api.cn/user/api-list" target="_blank">https://www.345api.cn/user/api-list</a>
          </div>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitForm" :loading="modalLoading"> 提交 </a-button>
          <a-button style="margin-left: 10px" @click="$router.back(-1)"> 取消 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { videoGoodsSetSetting, videoGoodsSetting } from '@/api/videoClassify'

export default {
  data() {
    return {
      form: {
        is_author_audit: '0',
        is_video_audit: '0',
        profit: '0',
        verify: ['tel', 'name', 'id', 'reason'],
        video_analyze_345: '',
      },
      rules: {
        is_author_audit: [{ required: true, message: '请选择', trigger: 'change' }],
        is_video_audit: [{ required: true, message: '请选择', trigger: 'change' }],
        profit: [{ required: true, message: '请输入分佣比例', trigger: 'blur' }],
      },
      modalLoading: false,
    }
  },

  methods: {
    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.verify.length && this.form.is_author_audit === '1') {
            this.$message.error('至少选择一种验证方式')
            return
          }

          this.modalLoading = true

          let form = JSON.parse(JSON.stringify(this.form))

          form.profit = String(form.profit)

          videoGoodsSetSetting(form)
            .then((res) => {
              this.modalLoading = false

              if (res.code !== 0) {
                this.$error({
                  content: res.msg,
                })
              } else {
                this.$message.success(res.msg)
                this.visible = false
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        }
      })
    },
  },

  mounted() {
    videoGoodsSetting().then((res) => {
      if (res.code === 0) {
        let { is_author_audit, is_video_audit, profit, verify, video_analyze_345 } = res.data
        this.form = {
          is_author_audit: String(is_author_audit),
          is_video_audit: String(is_video_audit),
          profit: parseFloat(profit),
          verify,
          video_analyze_345,
        }
      }
    })
  },
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
